<template>
    <section
        :style="{
            paddingTop: confDiy.paddingTop + 'px',
            paddingBottom: confDiy.paddingBottom + 'px',
            marginTop: confDiy.marginTop + 'px',
            marginBottom: confDiy.marginBottom + 'px',
            background: `linear-gradient(
                ${confDiy.bgEdg}deg,
                ${confDiy.bgColorOne},
                ${confDiy.bgColorTow},
                ${confDiy.bgColorThree})`
        }"
    >
        <div class="m-auto px-10 flex justify-between items-center gap-10">
            <div class="flex-1 shrink-0 overflow-hidden">
                <h2 v-if="confDiy.title"
                    class="text-center font-bold text-9xl line-clamp-1 mb-7"
                    :style="{ color: confDiy.titleColor }"
                >
                    {{ confDiy.title }}
                </h2>

                <p v-if="confDiy.intro"
                   class="text-center text-xl leading-8"
                   :style="{ color: confDiy.introColor }"
                >
                    {{ confDiy.intro }}
                </p>

                <div v-if="dataDiy.length > 0"
                     class="mt-14 text-center flex  gap-4"
                     :class="{ 'justify-center': !confDiy.image }"
                >
                    <template v-for="(item, index) in dataDiy">
                        <div
                            v-if="item.isEnable"
                            :key="index"
                            class="button"
                            :style="{
                                color: item.textColor,
                                borderColor: item.borderColor,
                                background: `linear-gradient(
                                    ${item.bgEdg}deg,
                                    ${item.bgColorOne},
                                    ${item.bgColorTow},
                                    ${item.bgColorThree})`
                            }"
                        >
                            {{ item.name }}
                        </div>
                    </template>
                </div>
            </div>
            <div v-if="confDiy.image">
                <img
                    :src="appStore.toAbsoluteUrl(confDiy.image)"
                    :alt="confDiy.title"
                    class="w-[500px]"
                />
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import type { EntrantConfigType, EntrantDataType } from '../index.ts'
import useAppStore from '@/stores/modules/app'

const props = defineProps({
    diyData: {
        type: Object,
        default: () => ({
            config: {} as EntrantConfigType,
            data: [] as EntrantDataType[]
        })
    }
})

const appStore = useAppStore()

// 装修数据
const confDiy = ref({} as EntrantConfigType)
const dataDiy = ref([] as EntrantDataType[])

// 监听数据
watch(
    () => props.diyData,
    (val) => {
        confDiy.value = val.config
        dataDiy.value = val.data
    }, { immediate: true }
)
</script>

<style scoped lang="scss">
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 228px;
    height: 60px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.5s;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    &:hover {
        transform: scale(1.025);
    }
}
</style>
